<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wrap {
        width: 300px;
        height: 300px;
        margin: 100px auto;
        display: flex;
        flex-direction: column;
        justify-content: right;
      }
      .wrap > div {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div><span>用户名：</span><input type="text" value="" /></div>
      <div><span>密码：</span><input type="text" value="" /></div>
      <div><span>邮箱：</span><input type="text" value="" /></div>
      <div><span>手机号：</span><input type="text" value="" /></div>
      <div><span>身份证号：</span><input type="text" value="" /></div>
      <div><span>账号：</span><input type="text" value="" /></div>
      <button id="btn">提交</button>
    </div>
  </body>
  <script>
    let aInput = document.querySelectorAll(".wrap input");
    let Input1 = /^([A-Za-z])(\w){2,15}/g;
    let Input2 = /^(\w[^_]){1}(\@|\w){5,9}/;
    let Input3 = /^(\w[^_])*((\@qq.com)|(\@gmail.com)|(\@163.com))$/g;
    let Input4 = /^1([0-9]){10}/;
    let Input5 = /^4([0-9]{9}(x|[0-9])$)/;
    let Input6 = /^[a-z]A-Z]{6,16}/;
    btn.onclick = function () {
      // if (!Input1.test(aInput[0].value)) {
      //   alert("2-8位字母组成");
      //   // Input1.lastIndex = 0;
      // } else {
      //   alert("正确");
      //   Input1.lastIndex = 0;
      // }
      // if (!Input2.test(aInput[1].value)) {
      //   alert("密码由字母数字下划线@组成，只能以字母数字开头");
      //   // Input1.lastIndex = 0;
      // } else {
      //   alert("正确");
      //   Input2.lastIndex = 0;
      // }
      //   if (!Input3.test(aInput[2].value)) {
      //     alert("邮箱你都不会写？");
      //     // Input1.lastIndex = 0;
      //   } else {
      //     alert("正确");
      //     Input3.lastIndex = 0;
      //   }
    };
  </script>
</html>
